<template>
  <el-container style="height: 640px; border: 1px solid #eee">
    <el-main>
      <el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">
        <el-form-item label="公告标题">
          <el-input v-model="formLabelAlign.title"></el-input>
        </el-form-item>
        <el-form-item label="公告内容">
          <el-input
            type="textarea"
            :rows="20"
            placeholder="请输入内容"
            v-model="formLabelAlign.content">
          </el-input>
        </el-form-item>
      </el-form>
      <div class="field">
        <button class="button bg-main icon-check-square-o" @click="addtoServer">
          提交
        </button>
      </div>
    </el-main>
    <el-upload
      class="upload-demo"
      ref="upload"
      action="http://localhost:8080/goods/add"
      :on-preview="handlePreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :multiple=true
      :limit=4
      :auto-upload="false"
      :http-request="uploadFile"
      list-type="picture">
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <!--<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>-->
      <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb（不能超过4张）</div>
    </el-upload>
  </el-container>
</template>

<script>
  import axios from "axios"

  export default {
    name: "MessageList",
    data() {
      return {
        fileList: [],
        formDate: "",
        labelPosition: 'right',
        formLabelAlign: {
          title: '',
          content: ''
        }
      };
    },
    methods: {
      uploadFile(file) {
        this.formDate.append('file', file.file);
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      addtoServer() {
        let that = this
        that.formDate = new FormData()
        that.$refs.upload.submit();
        that.formDate.append("title", that.formLabelAlign.title)
        that.formDate.append("content", that.formLabelAlign.content)
        that.formDate.append("empid", sessionStorage.getItem("empid"))
        axios.post(this.apiUrl + "/notice/add", that.formDate,
        ).then(r => {
          console.log(r)
          if(r.data.code=="200"){
            that.formLabelAlign.title='',
            that.formLabelAlign.content=''
          }
        })
        that.$refs.upload.clearFiles()
      }
    }
  }
</script>

<style scoped>
  el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>
